<template>
    <el-dialog v-model="showDialog" :title="title" :width="width" align-center 
    :destroy-on-close = "destroyOnClose"
    :close-on-click-modal="false">
        <div class="formDialog">
            <div class="body">
                <slot></slot>

            </div>
            <div class="actions">
                <el-button type="primary" @click="submit" :loading="loading"> {{confirmText}}</el-button>
                <el-button type="default" @click="close"> 取消</el-button>

            </div>
        </div>
    </el-dialog>
</template>

<script setup>
    import { ref } from 'vue';
import { type } from 'windicss/utils';
    const showDialog = ref(false)

    const props = defineProps({
        title:String,
        width:{
            type:String,
            default:"700",
        },
        destroyOnClose:{
            type:Boolean,
            default:false
        },
        confirmText:{
            type:String,
            default:"提交"
        }

    })

    const loading = ref(false)
    const showLoading = ()=>loading.value = true
    const hideLoading = ()=>loading.value = false




    const open = ()=> showDialog.value = true

    const close = ()=> showDialog.value = false


    // 提交
    const emit = defineEmits(["submit"])
    const submit = ()=> emit("submit")

    // 向父组件暴露方法
    defineExpose({
        open,
        close,
        showLoading,
        hideLoading
    })


</script>

<style>
    .formDialog{
        height: 800px;
        position: relative;
        @apply flex flex-col
    }

    .formDialog .body{
        flex: 1;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 50px;
        overflow-y: auto;
    }

    .formDialog .actions{
        height: 50px;
        @apply mt-auto flex items-center
    }
</style>